$(function () {
    var $img = $(".form-item .captcha-graph-img img")  //获取图像标签元素. 美元符号开头，获取标签元素
    var sImageCode = ""; //获取图像验证码的id值。     s开头字符串
    var $username = $('#user_name'); //获取username标签元素 对应的register页面的 input username id=user_name
    var $mobile = $('#mobile'); //选择id为moblie的网页元素标签，需要定义一个id为mobile的属性,获取用户输入的手机号码
    var $smsCodeBtn = $('.form-item .sms-captcha');  // 获取短信验证码按钮元素，需要定义一个id为input_smscode
    var $imgCodeText = $('#input_captcha');  // 获取用户输入的图片验证码元素，需要定义一个id为input_captcha

    generateImageCode();
    $img.click(generateImageCode); //点击事件，只需要加入函数名

    // 生成图片UUID验证码 就是存储在redis中的验证码的text对应的key值
    function generateUUID() {
        var d = new Date().getTime();
        if (window.performance && typeof window.performance.now === "function") {
            d += performance.now(); //use high-precision timer if available
        }
        var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = (d + Math.random() * 16) % 16 | 0;
            d = Math.floor(d / 16);
            return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
        return uuid;
    };

    // 2、用户名验证逻辑
    $username.blur(function () {//鼠标移出事件
        fn_check_username();
    });

    // 3、手机号码验证逻辑，判断用户手机号码是否注册
    $mobile.blur(function () {
        fn_check_mobile();
    });


    // 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
    function generateImageCode() {
        // 1、生成一个图片验证码随机编号
        sImageCodeId = generateUUID();
        // 2、拼接请求url /image_codes/<uuid:image_code_id>/
        var imageCodeUrl = "/image_codes/" + sImageCodeId + "/";
        // 3、修改验证码图片src地址
        $img.attr('src', imageCodeUrl)
    };

    // 判断用户名是否已经注册
    function fn_check_username() {
        var sUsername = $username.val();  // 获取用户名字符串
        if (sUsername === "") {
            message.showError('用户名不能为空！');
            // alert('用户名不能为空');
            return
        }
        if (!(/^\w{5,20}$/).test(sUsername)) {
            message.showError('请输入5-20个字符的用户名');
            // alert('请输入5-20个字符的用户名');
            return
        }

        // 发送ajax请求，去后端查询用户名是否存在
        $.ajax({
            url: '/usernames/' + sUsername + '/',//获取url路径
            type: 'GET',
            contentType: 'json'//contentType：告诉后端，我要发什么类型的数据；datatype：告诉后端，我需要你返回什么类型的数据，如果没有指定，那么会自动推断是返回 XML，还是JSON，还是script，还是String。
        })
            .done(function (res) {
                if (res.data.count !== 0) {
                    message.showError(res.data.username + '已注册，请重新输入！')
                    // alert('已注册，请重新输入！')
                } else {
                    message.showInfo(res.data.username + '能正常使用！')
                    // alert('能正常使用！')
                }
            })
            .fail(function () {
                message.showError('服务器超时，请重试！');
                // alert('服务器超时，请重试！');
            });
    };

    //判断手机号是否已经注册
    function fn_check_mobile() {
        var sMobile = $mobile.val();  // 获取用户输入的手机号码字符串
        var SreturnValue = "";
        if (sMobile === "") {
            message.showError('手机号不能为空！');
            return
        }
        if (!(/^1[345789]\d{9}$/).test(sMobile)) {
            message.showError('手机号码格式不正确，请重新输入！');
            return
        }

        $.ajax({
            url: '/mobiles/' + sMobile + '/',
            type: 'GET',
            dataType: 'json',
            async: false	// 把async关掉
        })
            .done(function (res) {
                if (res.data.count !== 0) {
                    message.showError(res.data.phone + '已注册，请重新输入！')
                    SreturnValue = ""
                } else {
                    message.showSuccess(res.data.phone + '手机号码可以使用')
                    SreturnValue = "success"
                }
            })
            .fail(function () {
                message.showError('服务器超时，请重试！');
                SreturnValue = ""
            });
        return SreturnValue

    };

    // 4、发送短信逻辑
    $smsCodeBtn.click(function () {
        // 判断手机号是否输入
        if (fn_check_mobile() !== "success") {
            message.showError('手机号码不能为空！');
            return
        }

        // 判断用户是否输入图片验证码
        var text = $imgCodeText.val();  // 获取用户输入的图片验证码文本
        if (!text) {
            message.showError('请填写验证码！');
            return
        }

        // 判断是否生成的UUID
        if (!sImageCodeId) {
            message.showError('图片UUID为空');
            return
        }

        // 正常获取参数
        var SdataParams = {
            "phone": $mobile.val(),   // 获取用户输入的手机号
            "text": text,  // 获取用户输入的图片验证码文本
            "image_code_id": sImageCodeId  // 获取图片UUID
        };

        // for test
        // var SdataParams = {
        //   "phone": "1886608",   // 获取用户输入的手机号
        //   "text": "ha3d",  // 获取用户输入的图片验证码文本
        //   "image_code_id": "680a5a66-d9e5-4c3c-b8ea"  // 获取图片UUID
        // };

        // 向后端发送请求
        $.ajax({
            // 请求地址
            url: "/sms_codes/",
            // 请求方式
            type: "POST",
            data: JSON.stringify(SdataParams),
            // 请求内容的数据类型（前端发给后端的格式）
            contentType: "application/json; charset=utf-8",
            // 响应数据的格式（后端返回给前端的格式）
            dataType: "json",
            async: false	// 关掉异步功能
        })
            .done(function (res) {
                if (res.errno === "0") {
                    // 倒计时60秒，60秒后允许用户再次点击发送短信验证码的按钮
                    message.showSuccess('短信验证码发送成功');
                    var num = 60;
                    // 设置一个计时器
                    let t = setInterval(function () {
                        if (num === 1) {
                            // 如果计时器到最后, 清除计时器对象
                            clearInterval(t);
                            // 将点击获取验证码的按钮展示的文本恢复成原始文本
                            $smsCodeBtn.html("获取短信验证码");
                            // // 将点击按钮的onclick事件函数恢复回去
                            // $(".get_code").attr("onclick", "sendSMSCode();");
                        } else {
                            num -= 1;
                            // 展示倒计时信息
                            $smsCodeBtn.html(num + "秒");
                        }
                    }, 1000);
                } else {
                    message.showError(res.errmsg);
                }
            })
            .fail(function () {
                message.showError("请求超时，请重试！");
            });
    });


    // get cookie using jQuery
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

    // Setting the token on the AJAX request
    $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
            }
        }
    });
});